<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Personal website</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;

        }
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: url('https://ts1.cn.mm.bing.net/th/id/R-C.9d7eb08a93452ee7c776d2581e11f973?rik=xpJgAnnl0iOb0Q&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f18871739%2f10.jpg&ehk=khUh9RhrTf98oOjkftcIwrpaG8Z1KkytBjl0gog%2b0Bw%3d&risl=&pid=ImgRaw&r=0') fixed no-repeat;*/
            /*background: url('https://pic1.zhimg.com/80/v2-c0dc70151a3c21b357a5fc0c9d9e7a6a_720w.webp?source=1940ef5c') fixed no-repeat;*/
            background-image: url("/img/reamkePwdbackground.jpg");
            background-size: cover;
            /*background-color: #131017;*/
        }

        .formput {
            width: 440px;
            height: 250px;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 40px;
            position: relative;
            z-index: 0;
            background: inherit;
            border-radius: 18px;
            overflow: hidden;
        }

        .formput::before {
            content: " ";
            width: calc(100% + 50px);
            height: calc(100% + 50px);
            position: absolute;
            top: -10px;
            left: -10px;
            background: inherit;
            filter: blur(16px);
            z-index: -1;
            overflow: hidden;
        }

        .formput h1 {
            font-size: 23px;
            /*font-weight: 30;*/
            color: whitesmoke;
        }

        .formput input {
            margin: 2px 0;
            height: 30px;
            border: none;
            background-color: #fff;
            border-radius: 5px;
            padding: 0 14px;
            color: black
        }
        .formput button {
            height: 30px;
            width: 200px;
            border: none;
            margin: 2px 0 2px 100px;

            background-color: #fff;
            border-radius: 5px;
            padding: 0 14px;
            color: black
        }

        button:hover {
            background-color: grey;
            /*font-size: 15px;*/
        }
        button{
            font-size: 18px;
            color: #a1b7a1;
        }
        .container .formput .signup {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            color: #fff;
            font-size: 15px;

        }
        .container .formput .signup a{
            color: #a6c0fe;
            text-decoration: none;
        }


    </style>
</head>
<body>

<div class="container">
<form id="login-form" class="formput" action="/loginProcessor" method="post">
        <h1>重置密码</h1>

        <input type="text" name="username" id="username" placeholder="用户名" pattern="^[A-Za-z0-9]+$" title="用户名由字母和数字组成" required="required"/>

        <input type="text" name="email" id="email" placeholder="邮箱" pattern="^\w+@\w+(\.\w+){1,2}$" title="请输入正确的邮箱" required="required"/>

        <input type="password" name="password" id="password" placeholder="新密码" pattern="^[a-zA-Z0-9]{6,10}$" title="密码由6-10位字母和数字组成" required="required"/>

        <button type="submit" id="mybtn">Remake</button>

        <div class="signup">
            还没有账户？<a href="loginAndregister.html">注册</a>
        </div>
</form>
</div>

<script type="text/javascript">
    $(function () {
        $("#login-form").submit(function (event) {
            event.preventDefault();
            var formData = $(this).serialize();

            $.ajax({
                type: "POST",
                url: "/remakeProcessor",
                data: formData,
                success: function (result) {
                    var code = result.success;
                    if (code === true) {
                        alert("重置成功！");
                    } else {
                        alert("重置失败！");
                    }
                },
                error: function () {
                    alert("重置错误！");
                }
            });
        });
    });
</script>

</body>
</html>
